<template >


    <el-select v-model="Search_Select" placeholder="请选择" slot="prepend" style="padding-left: 20px;padding-top: 20px">
      <el-option label="职位名称" value="job_name"></el-option>
      <el-option label="工作地点" value="working_area"></el-option>
      <el-option label="职位类型" value="job_type"></el-option>
    </el-select>
  <el-input  placeholder="请输入关键字" icon="search"  class="search"  v-model="Search_Input" style="width:200px;"></el-input>
  <el-button type="primary" style="width: 80px;margin-bottom: 20px;" @click="search_do">搜索</el-button>

  <el-table
    :data="showCrud"
    style="width: 98%;font-family: arial,verdana,helvetica,'PingFang SC','HanHei SC',STHeitiSC-Light,Microsoft Yahei,sans-serif;left:20px"
    class="job-table-style"
    >

    <el-table-column
      label="职位名称"
      prop="job_name"
      width="110">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.job_name }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="工作地点"
      prop="working_area"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.working_area }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="职位类别"
      prop="job_type"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.job_type }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="标签"
      prop="tap_infos"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.tap_infos }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="发布日期"
      prop="release_date"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.release_date }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="结束日期"
      prop="end_date"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.end_date }}</span>
      </template>
    </el-table-column>

    <el-table-column
      label="审核状态"
      prop="job_infor_examine"
      width="180">
      <template #default="scope">
        <span style="margin-left: 10px">{{ scope.row.job_infor_examine }}</span>
      </template>
    </el-table-column>



    <el-table-column label="操作">
      <template #default="scope">
        <el-button
          size="mini"
          @click="handleEditJob(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDeleteJob(scope.$index, scope.row)">删除</el-button>
        <el-button
          size="mini"
          @click="editHandleUpJob(scope.$index, scope.row)">提交</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!--    表格数据过多时,采用的分页-->
  <el-pagination
    background
    @current-change="handleCurrentChange"
    :current-page.sync="currentPage"
    :page-size="Page_Size"
    layout="prev, pager, next"
    :total="Page_Total"
    style="padding-top: 20px;padding-left: 1200px;">
  </el-pagination>

  <el-button  type="primary" style="float: left;width: 80px;margin-top: 10px;margin-left:20px;" @click="handleAddJob()">添加</el-button>


<!--  添加，弹框-->

  <el-dialog title="职位信息" v-model="addDialogFormVisible" >
    <el-form :model="job_form" ref="job_form" :rules="rule">
      <el-form-item label="职位名称" prop="job_name">
        <el-input v-model="job_form.job_name"></el-input>
      </el-form-item>
      <el-form-item label="职位类别" prop="job_type">
        <el-select v-model="job_form.job_type" placeholder="请选择职位类型">
          <el-option label="全职" value="全职"></el-option>
          <el-option label="实习" value="实习"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="招聘人数" prop="number_people">
        <el-input v-model="job_form.number_people"></el-input>
      </el-form-item>
      <el-form-item label="要求专业" prop="profession_require">
        <el-input v-model="job_form.profession_require"></el-input>
      </el-form-item>
      <el-form-item label="要求学历" prop="education_require">
        <el-input  v-model="job_form.education_require"></el-input>
      </el-form-item>

      <el-form-item label="标签" prop="taps">
        <el-input  v-model="job_form.taps"></el-input>
      </el-form-item>


      <el-form-item label="工作地区" prop="working_area">
        <el-input v-model="job_form.working_area"></el-input>
      </el-form-item>
      <el-form-item label="薪酬范围" prop="salary_range">
        <el-input v-model="job_form.salary_range"></el-input>
      </el-form-item>
      <el-form-item label="外语要求" prop="language_require">
        <el-input v-model="job_form.language_require"></el-input>
      </el-form-item>
      <el-form-item label="计算机要求" prop="computer_require">
        <el-input v-model="job_form.computer_require"></el-input>
      </el-form-item>
      <el-form-item label="其他要求" prop="other_require">
        <el-input v-model="job_form.other_require"></el-input>
      </el-form-item>
      <el-form-item label="简历投递邮箱" prop="resume_email">
        <el-input v-model="job_form.resume_email"></el-input>
      </el-form-item>
      <el-form-item label="职位描述" prop="job_description">
        <el-input v-model="job_form.job_description"></el-input>
      </el-form-item>
      <el-form-item label="发布日期" prop="release_date">
        <el-date-picker
          v-model="job_form.release_date"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="截至日期" prop="end_date">
        <el-date-picker
          v-model="job_form.end_date"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button @click="addDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addHandleJob('job_form',job_form)">确定添加</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>



<!--  提交弹框-->
  <el-dialog title="请确认提交" v-model="handleUpDialogFormVisible">
    <el-form :model="job_form" ref="job_form">
      <el-form-item>
        <el-button @click="handleUpDialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpHandleJob('job_form',job_form)">确定提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>





  <!--  编辑，弹框-->

  <el-dialog title="职位信息" v-model="editDialogFormVisible">
    <el-form :model="job_edit_form" ref="job_edit_form" :rules="rule">
      <el-form-item label="职位名称" prop="job_name">
        <el-input v-model="job_edit_form.job_name"></el-input>
      </el-form-item>
      <el-form-item label="职位类别" prop="job_type">
        <el-select v-model="job_edit_form.job_type" placeholder="请选择职位类型">
          <el-option label="全职" value="全职"></el-option>
          <el-option label="实习" value="实习"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="招聘人数" prop="number_people">
        <el-input v-model="job_edit_form.number_people"></el-input>
      </el-form-item>
      <el-form-item label="要求专业" prop="profession_require">
        <el-input v-model="job_edit_form.profession_require"></el-input>
      </el-form-item>
      <el-form-item label="要求学历" prop="education_require">
        <el-input  v-model="job_edit_form.education_require"></el-input>
      </el-form-item>
      <el-form-item label="工作地区" prop="working_area">
        <el-input v-model="job_edit_form.working_area"></el-input>
      </el-form-item>
      <el-form-item label="薪酬范围" prop="salary_range">
        <el-input v-model="job_edit_form.salary_range"></el-input>
      </el-form-item>
      <el-form-item label="外语要求" prop="language_require">
        <el-input v-model="job_edit_form.language_require"></el-input>
      </el-form-item>
      <el-form-item label="计算机要求" prop="computer_require">
        <el-input v-model="job_edit_form.computer_require"></el-input>
      </el-form-item>
      <el-form-item label="其他要求" prop="other_require">
        <el-input v-model="job_edit_form.other_require"></el-input>
      </el-form-item>
      <el-form-item label="简历投递邮箱" prop="resume_email">
        <el-input v-model="job_edit_form.resume_email"></el-input>
      </el-form-item>
      <el-form-item label="职位描述" prop="job_description">
        <el-input v-model="job_edit_form.job_description"></el-input>
      </el-form-item>
      <el-form-item label="发布日期" prop="release_date">
        <el-date-picker
          v-model="job_edit_form.release_date"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="截至日期" prop="end_date">
        <el-date-picker
          v-model="job_edit_form.end_date"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button @click="cancelEdit()">取消</el-button>
        <el-button type="primary" @click="editHandleJob('job_edit_form',job_edit_form)">确定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name:"table",
  data() {
    return {
      crud:[],

      //添加数据规则
      rule:{
        job_name:[
          { required: true, message: "请输入职位名称",
            trigger: "blur"
          },
          // {
          //   validator: Check,
          //   trigger: 'blur'
          // },
        ],
      },

      tapsId:'',
      job_form: {
        // enterprise_name:'',
        // enterprise_address: '',
        // industry:'',
        // enterprise_contacts: '',
        // enterprise_website: '',
        // organ_code: '',
        // enterprise_postcode: '',
        // enterprise_nature:'',
        // enterprise_fax:'',
        // register_capital: '',
        // enterprise_introduction: '',

      },
      job_edit_form:{
        // enterprise_name:'',
        // enterprise_address: '',
        // industry:'',
        // enterprise_contacts: '',
        // enterprise_website: '',
        // organ_code: '',
        // enterprise_postcode: '',
        // enterprise_nature:'',
        // enterprise_fax:'',
        // register_capital: '',
        // enterprise_introduction: '',
      },


      //职位临时数据
      addDialogFormVisible:false,
      editDialogFormVisible:false,
      handleUpDialogFormVisible:false,
      Search_Input:"",
      Search_Select:"",

      // //标签数据
      // tapsEdit:false,
      // taps:'',
      // tapsForm:{},

      //分页数据
      Page_Size: 7,
      currentPage: 1,
      Page_Total: 3,
      showCrud:[],

      last_job_id:0,
    }
    // let Check = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error('标签不能为空'));
    //   }
    // }
  },
  methods: {
    findAll(){
      let _this=this
      axios.get('http://localhost:8080/getComJobInfo_and_taps')
        .then (function (response) {
          //console.log(response.data)
          let last = response.data[response.data.length-1].job_infor_id
          //console.log(last)
          axios.post('http://localhost:8080/getJobInfo_back_company?company_id='+localStorage.getItem('username'))
            .then (function (response1) {
              _this.crud=response1.data;
              //console.log(response1.data)
              _this.showCrud=_this.crud.slice(0,_this.Page_Size);
              // _this.job_edit_form = JSON.parse(JSON.stringify(_this.showCrud))
              // console.log(_this.showCrud[0])

              _this.Page_Total=_this.crud.length
              //console.log(response.data)
              //console.log(_this.crud[_this.crud.length-1].job_infor_id)
              console.log(last)
              _this.tapsId= last+1
              //console.log(_this.tapsId)
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch(function (error) {
          console.log(error);
        });

    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.showCrud = this.crud.slice((val - 1) * this.Page_Size, val * this.Page_Size);

    },
    search_do(){
      let select = this.Search_Select
      if(!select){
        this.warning()
      }
      if (this.Search_Input === "") {
        this.showCrud = this.crud.slice(0, this.Page_Size);
        this.Page_Total = this.crud.length
        this.currentChangePage(this.crud)
        return;
      }
//每次手动将数据置空,因为会出现多次点击搜索情况
      this.Shop_Data_End = []
      // eslint-disable-next-line no-unused-vars
      this.crud.forEach((value,index,array) => {
        let temp = ''

        if (select === 'job_name') {
          temp = value.job_name
        }
        if (select === 'working_area') {
          temp = value.working_area
        }
        if (select === 'job_type') {
          temp = value.job_type
        }
        console.log(this.Search_Input)
        if (temp!=='') {
          if (temp.indexOf(this.Search_Input)>=0) {
            this.Shop_Data_End.push(value)
          }
        }
      });
//页面数据改变重新统计数据数量和当前页
      this.currentPage = 1
      this.Page_Total = this.Shop_Data_End.length
//渲染表格,根据值
      this.currentChangePage(this.Shop_Data_End)
//页面初始化数据需要判断是否检索过
      this.Search_flag = true
    },
    currentChangePage(list) {
      let from = (this.currentPage - 1) * this.Page_Size;
      let to = this.currentPage * this.Page_Size;
      this.showCrud = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.showCrud.push(list[from]);
        }
      }
    },
    warning() {
      this.$message({
        message: '请选择搜索标签！',
        type: 'warning'
      });
    },

    //删除职位
    handleDeleteJob(index,row) {
      let _this=this
      _this.$confirm('此操作将永久删除该职位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        console.log(row)
        console.log(_this.tapsId)
        axios.post('http://localhost:8080/deleteComTap',_this.tapsId)

        axios.post('http://localhost:8080/deleteJob_infor',row)

          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });

        _this.$router.go(0)
        _this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        _this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //添加职位信息
    handleAddJob(){
      this.job_form={}
      this.addDialogFormVisible=true
    },
    addHandleJob(formName,formData){
      let _this=this
      // console.log(JSON.parse(localStorage.getItem("Token"))[0]["Token"])
      console.log(JSON.parse(localStorage.getItem("Token")))
      console.log('2')
      axios.post('http://localhost:8080/getLoginInfo',JSON.parse(localStorage.getItem("Token"))[0])
        .then(function (response) {
          console.log(response.data)
          console.log(response.data.account_number)

          formData.company_id=response.data.account_number
          formData.job_infor_examine='未提交'
          console.log('1')
          _this.$refs[formName].validate((valid) => {
            if (valid) {
              axios.post('http://localhost:8080/addJob_infor', formData)
                .then(function (res) {
                  console.log('3')
                  console.log(formData)
                  if (formData.taps != null) {
                    axios.post('http://localhost:8080/addComTap?job_infor_id=' + _this.tapsId + '&label_name=' + formData.taps)
                      .then(function (respon) {

                        console.log(respon.data)
                      })
                      .catch(function (error) {
                        console.log(error);
                      });
                  }
                })
                .catch(function (error) {
                  console.log(error);
                });

            _this.loading = false
            localStorage.getItem("Token")
        } else {
              ElMessage.error('请输入正确格式！')
              console.log('error submit!!');
              return false;
        }
        });

        })
        .catch(function (error) {
          console.log(error);
        });



      console.log(formData)
      _this.addDialogFormVisible=false

    },

    //编辑职位信息
    cancelEdit(){
      this.editDialogFormVisible = false
      // for(let i=0;i<this.Page_Size;i++){
      //   if(this.showCrud[i].job_infor_id===this.job_edit_form.job_infor_id){
      //     console.log(125)
      //     console.log(this.showCrud[i])
      //     console.log(this.job_edit_form.job_infor_id)
      //     this.job_edit_form = JSON.parse(JSON.stringify(this.showCrud));
        // }
      // }
    },

    handleEditJob(index,row){
      // this.job_form = []
      // this.job_form = row
      this.job_edit_form = []
      this.job_edit_form= JSON.parse(JSON.stringify(row))
      this.editDialogFormVisible = true
    },
    // eslint-disable-next-line no-unused-vars
    editHandleJob(formName,formData){
      let _this=this;
      console.log(_this.$refs[formName])
      _this.$refs[formName].validate((valid) => {
        if (valid) {
          formData.job_infor_examine='未提交'
          axios.post('http://localhost:8080/modifyJob_infor', formData)
            // eslint-disable-next-line no-unused-vars
            .then(function (response) {
              console.log(10)
              for(let i=0;i<_this.showCrud.length;i++){
                if(_this.showCrud[i].job_infor_id===formData.job_infor_id){
                  _this.showCrud[i] = JSON.parse(JSON.stringify(formData))
                  console.log(11)
                }
              }

              console.log(_this.showCrud);
            })
            .catch(function (error) {
              console.log(error);
            });
        } else {
          ElMessage.error('请输入正确格式！')
          console.log('error submit!!');
          return false;
        }
      });
      this.editDialogFormVisible = false
    },

    //提交
    editHandleUpJob(index,row){
      this.job_form = []
      this.job_form = row
      this.handleUpDialogFormVisible = true
    },
    // eslint-disable-next-line no-unused-vars
    handleUpHandleJob(formName,formData){
      let _this=this;
      console.log(_this.$refs[formName])
      _this.$refs[formName].validate((valid) => {
        if (valid) {
          formData.job_infor_examine='待审核'
          axios.post('http://localhost:8080/modifyJob_infor', formData)
            // eslint-disable-next-line no-unused-vars
            .then(function (response) {
              console.log(formData);
            })
            .catch(function (error) {
              console.log(error);
            });
          this.handleUpDialogFormVisible = false

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // editHandleUpJob(formName,formData){
    //   let _this=this;
    //   if(formData.job_infor_examine='未提交') {
    //     formData.job_infor_examine = '待审核'
    //     axios.post('http://localhost:8080/modifyJob_infor', formData)
    //     // eslint-disable-next-line no-unused-vars
    //       .then(function (response) {
    //         console.log(formData);
    //       })
    //       .catch(function (error) {
    //         console.log(error);
    //       });
    //   }
    //     },
    // handleTapsEdit(index,row,taps){
    //   let _this=this
    //   _this.tapsEdit=true
    //   _this.tapsForm=[]
    //   _this.tapsForm=row
    //   axios.post('http://localhost:8080/addComTap?job_infor_id+label_name='+_this.tapsForm.job_infor_id+taps)
    //   _this.$router.go(0)
    //     .then(function (response) {
    //     })
    //     .catch(function (error) {
    //       console.log(error);
    //     });
    //   this.tapsEdit = false
    // },

  },

  created(){
    this.findAll()
  },



}
</script>
<style>

.job-table-style{
  box-shadow:5px 5px 5px 5px #c1c1c1;
}


</style>
